<template>
	<view class="details">
		<navbar title="详情页" bgcolor="#6252DF" txcolor="#ffffff"></navbar>
		
		<view class="banner-nav">
			<image class="banner" src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/003.png" mode="aspectFit"></image>
			<!-- <text class="num">报名人数:66人</text> -->
		</view>
		<view class="main p30">
			<view class="">
				<text class="tips-left fs28"> {{ detail.stageName }} </text>
				<text class="fc222 fs32 bold ml20">{{ detail.title }}</text>
			</view>
			<view class="acea-row row-between-wrapper mt30">
				<view class="acea-row row-middle fc666 fs26">
					<view class="iconfont icon-shijian fs28"></view>
					<view class="ml10">报名时间：{{ detail.stageData.baoming_start_time }} 至 {{ detail.stageData.baoming_end_time }}</view>
				</view>
			</view>
			<view class="acea-row row-between-wrapper mt20">
				<view class="pricec fs28">报名费:￥399/人</view>
				<view class="bill" @click.stop="competition()">赛程记录</view>
			</view>
			<view class="acea-row row-between-wrapper mt20">
				<view class="acea-row row-middle fc666 fs26">
					<view class="iconfont icon-shijian fs28"></view>
					<view class="ml10">评审时间：{{ detail.stageData.pingshen_start_time }} 至 {{ detail.stageData.pingshen_end_time }}</view>
				</view>
			</view>
			<view class="acea-row row-between-wrapper">
				<view class="acea-row row-middle fc222">
					<view class="iconfont icon-wxbdingwei fs30 bold"></view>
					<view class="fs30 ml10 line1" style="width: 500rpx;">{{ detail.baoming_to_address }}</view>
				</view>
				<view class="daohang acea-row row-middle row-center themecolor mt20" @click="openlocation">
					<text class="iconfont icon-daohang"></text>
					<text class="fs24 ml10">导航</text>
				</view>
			</view>
			<view class="bor-bot mt30 mb30"></view>
			<view>
				<parser :html="detail.content" ref="article"></parser>
			</view>
			<!-- <view class="banner02">
				<image class="pic" src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/003.png" mode=""></image>
			</view>
			<view class="title fs28">	
				超越巅峰现代音乐国际艺术节创始人为Beyond乐队叶世荣老师。艺术节是针对中国青少年儿童，
				旨在现代音乐为基石，“传承Beyond精神”的全国性现代音乐选拔的活动。北京现代音乐研修学院为超越巅峰艺术节协办单位，
				为艺术节提供专业演出设备与场地等。“超越巅峰·现代音乐国际艺术节”秉持透明严谨，
				公平公正的原则制定八项展演标准体系。让为音乐付出努力的选手获得权威的评选成绩。
				让志同道合的伙伴们一起玩最有趣的Festivel.
			</view> -->
		</view>
		
<!-- 		<view class="waring p30">
			抱歉你未晋级成功，省级选手拥有一次参加复活赛得的机会。
		</view> -->
		
		<view class="baoming fcwhite fs36" @click="baoming">评审未开启</view>
<!-- 		<view class="baoming fcwhite fs36">待评审</view>
		<view class="baoming fcwhite fs36">比赛评审中</view> -->
		
	</view>
</template>

<script>
	import{
		inletDetails
	} from '@/api/api.js'
	import parser from "@/components/jyf-parser/jyf-parser";
	import navbar from '../../components/navbar.vue';
	export default {
		components:{
			navbar,
			parser
		},
		data() {
			return {
				id:'',
				detail:[],
				
			};
		},
		onLoad(option) {
			this.id = option.id;
			this.getinfo();
		},
		methods:{
			openlocation(item){
				this.$util.openlocation(this.detail.latitude,this.detail.longitude);
			},
			getinfo(){
				let that = this;
				inletDetails({ huodong_id: that.id }).then(res=>{
					that.detail = res.data.data;
				})
			},
			competition(){
				uni.navigateTo({
					url:'/pages/home/competition-bill'
				})
			},
			baoming(){
				uni.navigateTo({
					url: '/pages/home/info'
				})
			}
		}
	}
</script>

<style lang="scss">
	.details{
		padding-bottom: 50rpx;
		
		.banner-nav{
			position: relative;
			
			.banner{
				width: 100%;
				height: 424rpx;
			}
			.num{
				width: 200rpx;
				height: 60rpx;
				border-radius: 154rpx;
				background: rgba(0, 0, 0, 0.6);
				text-align: center;
				line-height: 60rpx;
				color: #ffffff;
				font-size: 22rpx;
				position: absolute;
				bottom: 80rpx;
				left: 30rpx;
			}
		}
		
		.main{
			width: 100%;
			border-radius: 20rpx;
			margin-top: -50rpx;
			background-color: #ffffff;
			position: relative;
			
			.tips-left{
				width: 100rpx;
				height: 48rpx;
				border-radius: 20rpx 0 20rpx 0;
				background: #6252DF;
				text-align: center;
				line-height: 48rpx;
				color: #ffffff;
				display: inline-block;
			}
			
			.daohang{
				width: 144rpx;
				height: 60rpx;
				border-radius: 68rpx;
				background: rgba(98, 82, 223, 0.3);
			}
			
			.pic{
				width: 690rpx;
				height: 374rpx;
			}
			.title{
				line-height: 60rpx;
			}
			
			
		}
		
		.baoming{
			width: 100%;
			height: 140rpx;
			background-color: #6252DF;
			text-align: center;
			line-height: 140rpx;
			margin-top: 50rpx;
		}	
			
		.bill{
			width: 184rpx;
			height: 60rpx;
			border-radius: 44rpx;
			background: #6252DF;
			color: #ffffff;
			font-size: 28rpx;
			text-align: center;
			line-height: 60rpx;
		}
		.waring{
			color: #FF2B00;
			font-size: 30rpx;
		}
		
	}
</style>
